import React from "react";
import {Tabs,Carousel} from 'antd';
import "../../css/mobile.css";
import MobileHeader from "./mobile_header";
import MobileFooter from "./mobile_footer";
import MobileList from './mobile_list';
import Carousel1 from '../../images/carousel_1.jpg';
import Carousel2 from '../../images/carousel_2.jpg';
import Carousel3 from '../../images/carousel_3.jpg';
import Carousel4 from '../../images/carousel_4.jpg';
const TabPane = Tabs.TabPane;

class MobileIndex extends React.Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      autoplay: true
    };
    return (
      <div>
        <MobileHeader></MobileHeader>
        <Tabs>
          <TabPane tab="头条" key="1">
            <div className="carousel">
              <Carousel {...settings}>
                <div><img src={Carousel1} alt="Carousel1"/></div>
                <div><img src={Carousel2} alt="Carousel2"/></div>
                <div><img src={Carousel3} alt="Carousel3"/></div>
                <div><img src={Carousel4} alt="Carousel4"/></div>
              </Carousel>
            </div>
            <MobileList count={20} type="top" />
          </TabPane>
          <TabPane tab="社会" key="2">
            <MobileList count={20} type="shehui" />
          </TabPane>
          <TabPane tab="国内" key="3">
            <MobileList count={20} type="guonei" />
          </TabPane>
          <TabPane tab="国际" key="4">
            <MobileList count={20} type="guoji" />
          </TabPane>
          <TabPane tab="娱乐" key="5">
            <MobileList count={20} type="yule" />
          </TabPane>
        </Tabs>
        <MobileFooter></MobileFooter>
      </div>
    );
  };
}

export default MobileIndex;